var currentPage;
		var totalRecord;
		// 		页面加载完成以后，直接发送一个Ajax请求，要到分页数据
		$(function() {
			//去第一页
			to_page(1);
		});
		function to_page(pn) {
			$.ajax({
				url : "${APP_PATH}/emps",
				data : "pn=" + pn,
				type : "GET",
				success : function(result) {
					//console.log(result);
					//1.解析并显示员工数据
					bulid_emps_table(result);
					//2.解析并显示分页数据
					bulid_page_info(result);
					//3.解析显示分页条数据
					build_page_nav(result);
				}
			});
		}
		function bulid_emps_table(result) {
			//清空table表格
			$("#emps_table tbody").empty();
			var emps = result.extend.pageInfo.list;
			$.each(emps,
					function(index, item) {
						// 			alert(item.empName);
						var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td> ")
						var empIdTd = $("<td></td>").append(item.empId);
						var empNameTd = $("<td></td>").append(item.empName);
						// 			var gender = item.gender=='M'?"男":"女";
						var genderTd = $("<td></td>").append(
								item.gender == 'M' ? "男" : "女");
						var emailTd = $("<td></td>").append(item.email);
						var empDeptTd = $("<td></td>").append(
								item.department.deptName);

						var editBtn = $("<button></button>").addClass(
								"btn btn-primary btn-sm edit_btn").append(
								$("<span></span>").addClass(
										"glyphicon glyphicon-pencil")).append(
								"编辑");
						//为编辑按钮添加一个自定义的属性，来表示当前员工的id
						editBtn.attr("edit-id",item.empId);
						var delBtn = $("<button></button>").addClass(
								"btn btn-danger btn-sm delete_btn").append(
								$("<span></span>").addClass(
										"glyphicon glyphicon-trash")).append(
								"删除");
						
						//为删除按钮添加一个自定义属性，来表示当前员工的Id
						delBtn.attr("del-id",item.empId);
						var btnTd = $("<td></td>").append(editBtn).append(" ")
								.append(delBtn);

						// 			append方法执行完成以后还是返回原来的元素
						$("<tr></tr>").append(checkBoxTd).append(empIdTd).append(empNameTd)
								.append(genderTd).append(emailTd).append(
										empDeptTd).append(btnTd).appendTo(
										"#emps_table tbody");
					});
		}
		//解析显示分页信息的
		function bulid_page_info(result) {
			$("#page_info_area").empty();
			$("#page_info_area").append(
					"当前" + result.extend.pageInfo.pageNum + "页，总"
							+ result.extend.pageInfo.pages + "页,总"
							+ result.extend.pageInfo.total + "条记录");
			totalRecord = result.extend.pageInfo.total;
			currentPage = result.extend.pageInfo.pageNum;
		}

		//解析显示分页条,点击分页能够显示数据
		function build_page_nav(result) {
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");

			//构建元素
			var firstPageLi = $("<li></li>").append(
					$("<a></a>").append("首页").attr("href", "#"));
			var prePageLi = $("<li></li>").append(
					$("<a></a>").append("&laquo;"));
			if (result.extend.pageInfo.hasPreviousPage == false) {
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			} else {
				//为元素添加翻页的事件
				firstPageLi.click(function() {
					to_page(1);
				});
				prePageLi.click(function() {
					to_page(result.extend.pageInfo.pageNum - 1);
				});
			}

			var nextPageLi = $("<li></li>").append(
					$("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append(
					$("<a></a>").append("末页").attr("href", "#"));
			if (result.extend.pageInfo.hasNextPage == false) {
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			} else {
				nextPageLi.click(function() {
					to_page(result.extend.pageInfo.pageNum + 1);
				});
				lastPageLi.click(function() {
					to_page(result.extend.pageInfo.pages);
				});
			}

			ul.append(firstPageLi).append(prePageLi);
			//添加首页和前一页的提示
			//遍历页码号
			$.each(result.extend.pageInfo.navigatepageNums, function(index,
					item) {
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if (result.extend.pageInfo.pageNum == item) {
					numLi.addClass("active");
				}
				numLi.click(function() {
					to_page(item);
				});
				ul.append(numLi);
			});
			//添加下一页和末页的提示
			ul.append(nextPageLi).append(lastPageLi);
			//把ul加入nav中
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");

		}
		function reset_form(ele){
			$(ele)[0].reset();
			$(ele).find("*").removeClass("has-error has-success");
			$(ele).find(".help-block").text("");
		}
		
//			查出所有部门信息，显示在下拉列表中
		function getDepts(ele){
			$(ele).empty();
			$.ajax({
				url:"${APP_PATH}/depts",
				type:"GET",
				success:function(result){
//						console.log(result);
//						$("#dept_add_select").addpend("")
					$.each(result.extend.depts,function(){
						var optionEle = $("<option ></option>").append(this.deptName).attr("value",this.deptId);
						optionEle.appendTo(ele);
					});
				}
			})
		}
		
// 点击新增按钮，弹出模态框
		$("#emp_add_modal_btn").click(function() {
// 			表单完整重置
// 			表单重置
			reset_form("#empAddModal form");
// 			$("#empAddModal form")[0].reset();  //jquery没有reset()方法，需要调用dom对象进行调换使用。
// 			发送ajax，查出部门信息，显示下拉列表
			getDepts("#dept_add_select");
			$("#empAddModal").modal({
				backdrop : "static"
			});

		});
// 		校验数据的可行性
		function validate_add_form(){
			//拿到要校验的数据，可以使用正则表达式
			var empName = $("#empName_add_input").val();
			var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
			if(!regName.test(empName)){
				show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位的数字和英文组合");
				return false;
			}else{
				show_validate_msg("#empName_add_input","success","");
				
			}
			//校验邮箱信息
			var email = $("#email_add_input").val();
			var regEmail =/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			if(!regEmail.test(email)){
				show_validate_msg("#email_add_input","error","邮箱格式不对");
				return false;
			}else{
				show_validate_msg("#email_add_input","success","");
			}
			return true;
		}
		
		function show_validate_msg(ele,status,msg){
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			if("success"==status){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			}else if("error"==status){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		
		$("#empName_add_input").change(function(){
// 			发送ajax，校验用户名是否可用
			var empName = this.value;
			$.ajax({
				url:"${APP_PATH}/checkuser",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(result.code==100){
						show_validate_msg("#empName_add_input","success","");
						$("#emp_save_btn").attr("ajax-va","success");
					}else{
						show_validate_msg("#empName_add_input","error",result.extend.va_msg);
						$("#emp_save_btn").attr("ajax-va","error");
					}
				}
			
			});
		})
		
		$("#emp_save_btn").click(function(){
// 			将模态框中填写的数据交个服务进行保存
// 		        需要对数据进行校验
		   if(!validate_add_form()){
				return false;
			}  
			
// 			判断ajax的用户名校验是否成功了
			if($(this).attr("ajax-va")=="error"){
				return false;
			}
			
// 			发送ajax保存员工
// 			alert($("#empAddModal form").serialize());
			$.ajax({
				url:"${APP_PATH}/emp",
				type:"POST",
				data:$("#empAddModal form").serialize(),
				success:function(result){
// // 					alert(result.msg);
					if(result.code==100){
// 						员工保存成功，关闭模态框，来到最后一页，显示刚才保存的数据
						$("#empAddModal").modal('hide');
						to_page(totalRecord);
					}else{
						//显示失败信息
// 						console.log(result);
						//有那个字段的错误信息就显示那个字段
						if(undefined != result.extend.errorFields.email){
							//显示邮箱的错误信息
							show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
						}
						if(undefined != result.extend.errorFields.empName){
							//显示与员工名字的错误信息
							show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
						}
						
					}
				}
			})
		})
		
		
		//1.我们是在创建之先绑定了click,所以绑定不上
		//解决方法：1可以在创建按钮的时候绑定事件
		//2.绑定点击live()
		//新版本已经没有live了，用on进行替代
		$(document).on("click",".edit_btn",function(){
// 			alert("edit");
		
		//1.查出部门信息，显示部门列表
			getDepts("#dept_update_select");
			//查出员工信息，显示员工信息
			getEmp($(this).attr("edit-id"));
			//3.把员工的id传给模态框的更新按钮
			$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
			$("#empUpdateModal").modal({
				backdrop:"static"
			});
		});
		
		function getEmp(id){
			$.ajax({
				url:"${APP_PATH}/emp/"+id,
				type:"GET",
				success:function(result){
// 					console.log(result);
					var empData = result.extend.emp;
					$("#empName_update_static").text(empData.empName);
					$("#email_update_input").val(empData.email);
					$("#empUpdateModal input[name=gender]").val([empData.gender]);
					$("#empUpdateModal select").val([empData.dId]);
				}
			})
		}
		
		//点击更新，更新员工信息
		$("#emp_update_btn").click(function(){
			//校验邮箱信息
			var email = $("#email_update_input").val();
			var regEmail =/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			if(!regEmail.test(email)){
				show_validate_msg("#email_update_input","error","邮箱格式不对");
				return false;
			}else{
				show_validate_msg("#email_update_input","success","");
			}
			//发送ajax请求，保存员工数据
			$.ajax({
				url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
// 				type:"POST",
// 				data:$("#empUpdateModal form").serialize()+"&_method=PUT",
				type:"PUT",
				data:$("#empUpdateModal form").serialize(),
				success:function(result){
// 					alert(result.msg);
					if(result.code==100){
// 						员工保存成功，关闭模态框，来到当前一页，显示刚才保存的数据
						$("#empUpdateModal").modal('hide');
						to_page(currentPage);
					}
				}
			})
		})
		//单个删除
		$(document).on("click",".delete_btn",function(){
			//1.弹出时候确认删除对话框
			var empName = $(this).parents("tr").find("td:eq(2)").text();
			var empId = $(this).attr("del-id");
// 			alert(empName);
			if(confirm("确认删除【"+empName+"】"+"吗")){
				$.ajax({
					url:"${APP_PATH}/emp/"+empId,
					type:"DELETE",
					success:function(result){
						if(result.code==100){
//	 						员工删除成功，回到本页
// 							alert(result.msg);
							to_page(currentPage);
						}

					}
				})
			}
		});
		
		//完成全选/全不选
		$("#check_all").click(function(){
			//attr获取checkd是undefined,attr用来获取自定义属性
			///使用prop来读取dom原生属性
// 			$(this).prop("checked");
			$(".check_item").prop("checked",$(this).prop("checked"));
		});
		
		//check_item
		$(document).on("click",".check_item",function(){
			//判断当前选择的元素是否是五个
			var flag = $(".check_item:checked").length==$(".check_item").length;
				$("#check_all").prop("checked",flag);
// 			$("#chekc_all")
		})
		
		//点击全部删除，就批量删除
		$("#emp_delete-all_btn").click(function(){
// 			$(".check_item:checked")
			
			var empNames = "";
			
			var del_idstr= "";
			$.each($(".check_item:checked"),function(){
				empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
// 				alert(empNames);
				//组装员工id字符串
				del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
			});
			empNames = empNames.substring(0,empNames.length-1);
			//删除员工id多余的-
			del_idstr = del_idstr.substring(0,del_idstr.length-1);
			if(confirm("确认删除【"+empNames+"】吗？")){
				$.ajax({
					url:"${APP_PATH}/emp/"+del_idstr,
					type:"DELETE",
					success:function(){
						to_page(currentPage);
					}
				})
			}
		})